<template>
  <div class="dashboard-view">
    <header class="dashboard-header">
      <h1 class="glow">销售数据看板</h1>
      <div class="header-actions">
        <button class="refresh-btn" @click="refreshData" :disabled="loading">
          <span class="icon">🔄</span>
          刷新数据
        </button>
      </div>
    </header>

    <div class="dashboard-content">
      <div class="cards-grid">
        <!-- 销售概览 -->
        <DataCard v-if="salesData" title="销售概览" icon="💰" class="card-full">
          <div class="overview-grid">
            <div class="overview-item">
              <div class="value">¥{{ (salesData.totalRevenue / 10000).toFixed(1) }}万</div>
              <div class="label">总收入</div>
            </div>
            <div class="overview-item">
              <div class="value">{{ salesData.totalContracts }}</div>
              <div class="label">总合同数</div>
            </div>
            <div class="overview-item">
              <div class="value">{{ salesData.activeProjects }}</div>
              <div class="label">活跃项目</div>
            </div>
            <div class="overview-item">
              <div class="value">{{ salesData.completionRate.toFixed(1) }}%</div>
              <div class="label">完成率</div>
            </div>
          </div>
        </DataCard>

        <!-- 合同统计 -->
        <DataCard v-if="contracts.length > 0" title="合同统计" icon="📊">
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-value">{{ contracts.length }}</div>
              <div class="stat-label">总合同数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ contracts.filter(c => c.status === 'active').length }}</div>
              <div class="stat-label">活跃合同</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">¥{{ (contracts.reduce((sum, c) => sum + c.amount, 0) / 10000).toFixed(1) }}万</div>
              <div class="stat-label">总金额</div>
            </div>
          </div>
        </DataCard>

        <!-- 项目跟踪 -->
        <ProjectTracker
          v-if="projects.length > 0"
          :projects="projects.slice(0, 5)"
          :highlight-risks="true"
          sort-by="status"
        />
      </div>
      
      <p v-if="loading" class="loading-text">加载中...</p>
      <p v-if="error" class="error-text">错误: {{ error.message }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useDashboardStore } from '@/stores/dashboard'
import DataCard from '@/components/DataCard.vue'
import ProjectTracker from '@/components/ProjectTracker.vue'

const store = useDashboardStore()
const { salesData, contracts, projects, loading, error } = storeToRefs(store)

async function refreshData() {
  await store.refreshData()
}

onMounted(async () => {
  console.log('DashboardView mounted')
  try {
    await store.fetchDashboardData()
    console.log('Data fetched:', salesData.value)
  } catch (err) {
    console.error('Error fetching data:', err)
  }
})
</script>

<style lang="scss" scoped>
.dashboard-view {
  min-height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 2rem;
}

.dashboard-header {
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  
  h1 {
    font-size: 2rem;
    margin: 0;
    color: var(--color-primary);
    text-shadow: 0 0 20px var(--color-primary);
  }
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--color-primary);
  color: var(--bg-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.dashboard-content {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  
  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
  }
}

.card-full {
  grid-column: 1 / -1;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.stat-item {
  text-align: center;
  padding: 1rem;
  background: rgba(0, 243, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(0, 243, 255, 0.2);
}

.stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.loading-text, .error-text {
  text-align: center;
  padding: 2rem;
  font-size: 1.1rem;
}

.error-text {
  color: #ff3366;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  
  @media (max-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.overview-item {
  text-align: center;
  padding: 1.5rem;
  background: rgba(0, 243, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(0, 243, 255, 0.2);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
  }
  
  .value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    text-shadow: 0 0 10px var(--color-primary);
  }
  
  .label {
    font-size: 0.875rem;
    color: var(--text-secondary);
  }
}
</style>
